<template>
  <div>
    <div class="wrapper">
      <div class="logoContainer">
        <img class="logoImg" src="../assets/logo.png" alt="" />
        门户系统
      </div>
      <div class="tabContainer">
        <el-tabs tab-position="top" class="demo-tabs" @tab-click="handleClick" v-model="activeName">
          <el-tab-pane label="首页" name="/"></el-tab-pane>
          <el-tab-pane label="行业资讯" name="consultation"></el-tab-pane>
          <el-tab-pane label="行业数据" name="industryData"></el-tab-pane>
          <el-tab-pane label="行业活动" name="activity"></el-tab-pane>
          <el-tab-pane label="会员服务" name="serve"></el-tab-pane>
        </el-tabs>
      </div>
      <img style="width: 30px; height: 30px" class="adminImg" src="../assets/用户.png" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import router from '@/router'

const activeName = ref('/')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  router.push({
    path: tab.props.name as string
  })
}
</script>
<style lang="less" scoped>
::v-deep .el-tabs__nav-wrap::after {
  display: none;
}

.wrapper {
  width: 80%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 auto;
  .logoContainer {
    width: 50%;
    font-size: 20px;
    color: #1580ff;
    display: flex;
    align-items: center;
    .logoImg {
      width: 30px;
      font-weight: normal;
      margin-right: 10px;
    }
  }
  .tabContainer {
    width: 40%;
  }
  .adminImg {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
  }
}
.logoImg {
}
</style>
